import React, { useState, useEffect } from 'react'
import './style.less'
import { withRouter } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import * as collectActions from '../../../redux/actions/collect'

const BuyAndStoreView = (props) => {

  const dispatch = useDispatch()
  const [iscollect, setIscollect] = useState(false)

  useEffect(() => {
    setIscollect(isStore())
  },[])

  function storeHandle() {
    if(props.user.token) {
      // 判断用户是否收藏
      // 收藏则取消收藏
      // 未收藏则收藏
      if(isStore()) {
        setIscollect(false)
        // 已收藏
        dispatch(collectActions.removeCollect(props.id))
      } else {
        setIscollect(true)
        // 未收藏
        dispatch(collectActions.setCollect(props.id))
      }
    } else {
      // 请登录
      props.history.push('/login')
    }
  }

  // 用户收藏判定
  function isStore() {
    let collects = props.collects
    let id = props.id
    return collects.some(item => {
      return item == id
    })
  }

  return (
    <div className='buy-store-container clear-fix'>
      <div className='item-container float-left'>
        {
          iscollect ? <button className='selected o' onClick={storeHandle}>已收藏</button> : <button className='selected' onClick={storeHandle}>收藏</button>
        }    
      </div>
      <div className='item-container float-right'>
        <button className='selected'>购买</button>
      </div>
    </div>
  )
}

export default withRouter(BuyAndStoreView)